---
title: Mall 简介
---

# Mall 简介

TiDB 是 PingCAP 公司自主设计、研发的开源分布式关系型数据库，是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP）的融合型分布式数据库产品，具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生的分布式数据库、兼容 MySQL 5.7 协议和 MySQL 生态等重要特性。目标是为用户提供一站式 OLTP (Online Transactional Processing)、OLAP (Online Analytical Processing)、HTAP 解决方案。TiDB 适合高可用、强一致要求较高、数据规模较大等各种应用场景。

```sh
npm i theme-ui
```

Create a theme object to include custom color, typography, and layout values.
> dsafhajhj

```js
// example theme.js
export default {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}
```

<Note>
  If you're using Gatsby, see the [Getting Started with
  Gatsby](/getting-started/gatsby) page.
</Note>

Add the theme to your application with the `ThemeProvider`, passing in the `theme` object as a prop.

```jsx
// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

export default props => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
```

## `sx` prop

Use the `sx` prop throughout your application to add styles based on your theme to any component.
Enable the `sx` prop by adding the `/** @jsx jsx */` comment to the top of your file and importing `jsx` from Theme UI.

The `sx` prop lets you add any valid CSS to an element,
while using values from your theme to keep styles consistent.
You can think of the style object that the `sx` prop accepts as a *superset* of CSS.


```jsx
/** @jsx jsx */
import { jsx } from 'theme-ui'

export default props => (
  <div
    sx={{
      fontWeight: 'bold',
      fontSize: 4, // picks up value from `theme.fontSizes[4]`
      color: 'primary', // picks up value from `theme.colors.primary`
    }}>
    Hello
  </div>
)
```

## Responsive styles

The `sx` prop also supports using arrays as values to change properties responsively with a mobile-first approach.

```jsx
/** @jsx jsx */
import { jsx } from 'theme-ui'

export default props => (
  <div
    sx={{
      // applies width 100% to all viewport widths,
      // width 50% above the first breakpoint,
      // and 25% above the next breakpoint
      width: ['100%', '50%', '25%'],
    }}
  />
)
```

<Note>

  This API originated in [Styled System][] and is intended as [a terser syntax
  for applying responsive styles](https://styled-system.com/guides/array-props)
  across a singular dimension.
  The values used for media queries can be defined in a
  [`theme.breakpoints`](/theming/#breakpoints) array.

</Note>

If you prefer standard CSS syntax, you can use nested objects for responsive styles as well.

```jsx
<div
  sx={{
    width: '100%',
    '@media screen and (min-width: 40em)': {
      width: '50%',
    }
  }}
/>
```

## Components

Theme UI includes a library of primitive UI components, which can be completely customized with your theme and include support for [variants](/components/variants).
You can use variants to encapsulate more complex, component-specific styles that can be changed with props.
Import and use these components to handle layout, images, forms, and more.

```jsx
/** @jsx jsx */
import {
  jsx,
  Box,
  Label,
  Input,
  Button,
} from 'theme-ui'

export default props =>
  <Box sx={{ mb: 4 }}>
    <Label htmlFor='search'>
      Search
    </Label>
    <Input
      id='search'
      name='search'
      {...props}
    />
    <Button>
      Go
    </Button>
  </Box>
```

See the [Components](/components) documentation for more.

[styled system]: https://styled-system.com
